<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <!-- vue2 -->
    <script src="/examples/js/vue.min.js"></script>
    <!-- 示例演示-公共样式 -->
    <link rel="stylesheet" href="/examples/css/railView.css" type="text/css" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- RailUnit 样式 -->
    <link rel="stylesheet" href="/RailUnit/RailUnit.umd.css" type="text/css">
    <!-- RailUnit 插件 -->
    <script type="text/javascript" src="/RailUnit/RailUnit.umd.js" charset="utf-8"></script>
</head>
<body>
    <div id="app">
        <div id="buttom-container">
            <el-button type="info" @click="dialogFormVisible = true">LOD层级</el-button>
        </div>
        <div id="viewer" style="width:100%;height:100%;position:relative;float:left"></div>
        <el-dialog title="选择初始化加载的LOD层级" :visible.sync="dialogFormVisible" width="25%">
            <el-radio-group v-model="levelValue" v-for="item in level">
                <el-radio :label="item.value" :key="item.value" style="padding-right: 1em;">{{item.label}}</el-radio>
            </el-radio-group>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="handleSubmit" size="mini">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <script id="viewerStartup" type="module">
        const vm = new Vue({
            el: '#app',
            data: {
                dialogFormVisible: false,
                viewer: null,
                ids: [5],
                levelValue: 0,
                level: [
                   {
                    label: '高清',
                    value: 0
                   },
                   {
                    label: '中等',
                    value: 1
                   },
                   {
                    label: '低精度',
                    value: 2
                   }
                ]
            },
            mounted () {
                this.bimViewerFn()
            },
            methods: {
                // 初始化模型
                bimViewerFn() {
                    this.bimViewer = new MyViewer({
                        serverUrl: '/RailUnit/',
                        containerElement: document.getElementById('viewer'),
                        nodeVisible: false
                    })
                    this.bimViewer.loadModel2('jianzhu')
                },
                handleSubmit() {
                    this.viewer.setLodLevel(this.ids, this.levelValue)
                    this.dialogFormVisible = false
                }
            }
        })
    </script>
</body>
</html>
